<script setup>
    import * as echarts from "echarts";
    import { watch } from "vue";
    import { useStore } from 'vuex'

    const props = defineProps({
        mapList: {
            type: Array,
            default: []
        }
    })

    const store = useStore()

    let eCharts = null;
    let lineChart = $ref(null);
    
    // x轴数据
    let xData = $ref([])

    // y轴数据
    let yData1 = $ref([])
    let yData2 = $ref([])


    watch(
        () => props.mapList,
        (newV, oldV) => {
            init();
        }
    );

    watch(
        () => store.state.currentCityCode,
        (newV, oldV) => {
            eCharts.clear()
            init('refresh')
        }
    );

    let timer = $ref(undefined)
    

    const init = (type) => {
        if(timer) clearInterval(timer)

        xData = ['济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市', '泰安市', '威海市', '日照市', '临沂市', '德州市', '聊城市', '滨州市', '菏泽市']
        yData1 = [2400, 3500, 1400, 1200, 1300, 2000, 1800, 1700, 1790, 1830, 1420, 1650, 1780, 1880, 1750, 1560]
        yData2 = [2200, 3300, 1200, 1000, 1100, 1800, 1600, 1500, 1590, 1630, 1220, 1450, 1580, 1680, 1550, 1360]
        // props.mapList.forEach(item => {
        //     xData.push(item.val1)
        //     yData1.push(item.val4.split('人')[0])
        //     yData2.push(item.val3.split('人')[0])
        // })

        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
            },
            legend: {
                right: '0',
                top: '2%',
                textStyle: {
                    fontSize: 14,// 字体大小
                    color: '#ffffff'// 字体颜色
                },
            },
            dataZoom: [
             //滑动条
            {
                xAxisIndex: 0, //这里是从X轴的0刻度开始
                show: false, //是否显示滑动条，不影响使用
                type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                startValue: 0, // 从头开始。
                endValue: 6, // 一次性展示6个。
            }],
            grid: {
                left: '0',
                top: '10%',
                bottom: '5%',
                right: '0',
                containLabel: true,
            },
            xAxis: {
                axisLabel: {
                    color: "#fff",
                    interval: 0,
                    fontSize: 14
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                },
                z: 10,
                data: xData,
            },
            yAxis: {
                axisLine: {
                    show: true,
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    color: "#fff",
                },
            },
            series: [
                {
                    name: '公益岗上岗人数',
                    type: 'bar',
                    barWidth: 12,
                    barGap: '10%',
                    emphasis: {
                        focus: 'series',
                    },
                    data: yData1,
                    itemStyle: {
                        color: '#FAC858',
                        barBorderRadius: [9, 9, 0, 0],
                    },
                },
                {
                    name: '2022年计划拓岗人数',
                    type: 'bar',
                    barWidth: 12,
                    barGap: '10%',
                    emphasis: {
                        focus: 'series',
                    },
                    itemStyle: {
                        color: '#77FBEC',
                        barBorderRadius: [9, 9, 0, 0],
                    },
                    data: yData2,
                }
            ],
        }

        if(!type) eCharts = echarts.init(lineChart);
        eCharts.setOption(option);

        timer = setInterval(function () {
            // 每次向后滚动一个，最后一个从头开始。
            // console.log(option.dataZoom[0].endValue);
            // console.log("---"+KSMC.length);
            
            if (option.dataZoom[0].endValue == xData.length) {
            option.dataZoom[0].endValue = 6;
            option.dataZoom[0].startValue = 0;
            } else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
            }
            eCharts.setOption(option);
        }, 4000)
    }

</script>

<template>
    <div class="card-box city-comparison-wrap">
        <card-title title="各市人员统计对比"></card-title>

        <div class="line-chart" ref="lineChart"></div>
    </div>
</template>

<style scoped lang="scss">
@import "../../assets/css/common.scss";
    .city-comparison-wrap{
        height: 276px;
        .line-chart{
            height: 230px;
        }
    }
</style>